import { useState } from 'react';
import BindInput from "./component/BindInput";
import CommentSection from "./component/CommentSection";
import Son from "./component/Son";
import SonChildren from "./component/SonChildren";
import UserRef from "./component/UserRef";
import './index.css';
import ChildrenToParent from "./component/ChildrenToParent";
import Context from "./component/Context";
import MyContext from "./component/MyContext";
import EffectList from "./component/EffectList";
import SetHooks from "./component/SetHooks";
import { useSelector,useDispatch } from 'react-redux';
import { increment,decrement,addToNum } from './store/modules/couterStore';
import ReduxAsync from "./component/ReduxAsync";

function App() {
    const {rcount} = useSelector(state => state.rcount);
    const dispatch = useDispatch();


    const handleClick = (message, event) => {
        console.log(message)
        console.log(event.type)
    };

    const addCount = () => {
        setCount(count + 1)
    }

    const [count, setCount] = useState(0)

    const Button = () => {
        return (
            <button onClick={(e) => handleClick("点击我", e)}>Click me</button>
        )
    }

    const chageName = (name) => {
        setForm({ ...form, name: name })
    }

    const [form, setForm] = useState({
        name: '李四',
        age: 18
    })

    const style = {
        color: 'blue',
        fontSize: '16px'
    }

    const [parentValue, setParentValue] = useState('');

    const changeParentValue = (value) => {
        setParentValue(value);
    }

  

    return (
        <div>
            <Button />
            <hr />
            <hr />
            <button onClick={addCount}>点击我{count}</button>
            <hr />
            <hr />
            <button onClick={() => chageName('张三')}>修改名字--{form.name}</button>
            <hr />
            <p style={style}>这是css测试1</p>
            <hr />
            <p className={'pcolor'}>这是css测试2</p>
            <hr />
            <CommentSection />
            <hr />
            <BindInput />
            <hr />
            <UserRef />
            <hr />
            <Son name="张三" age={18} />
            <hr />
            <SonChildren>
                <p>父组件中的h1</p>
            </SonChildren>
            <hr />
            <p>子传父参数测试: {parentValue}</p>
            <ChildrenToParent changeParentValue={changeParentValue} />
            <hr />
            <MyContext.Provider value={11111111}>
                <Context />
            </MyContext.Provider>
            <hr />
            <EffectList />
            <hr />
            <SetHooks />
            <hr />
            <p>Redux测试: {rcount}</p>
            <button onClick={() => dispatch(increment())}>增加</button>
            <button onClick={() => dispatch(decrement())}>减少</button>
            <button onClick={() => dispatch(addToNum(10))}>增加至10</button>
            <button onClick={() => dispatch(addToNum(20))}>增加至20</button>

            <p>redux异步测试:</p>
            <ReduxAsync/>
        </div>

    )
}

export default App;
